<template>
  <div class="mine-main">
    <div class="mineTop">
      <div class="headPortrait">
        <img
          src="http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
          class="headPortraitImg"
        />
        <div class="username">用户</div>
      </div>
    </div>
    <ul class="mineList">
      <li class="mineItem">我的订单</li>
      <li class="mineItem">优惠券</li>
      <li class="mineItem">我的足迹</li>
      <li class="mineItem" @click="gocollection">我的收藏</li>
      <li class="mineItem" @click="goAddress">地址管理</li>
      <li class="mineItem">联系客服</li>
      <li class="mineItem">帮助中心</li>
      <li class="mineItem" @click="goFeedback">意见反馈</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mine",
  data() {
    return {
      
    };
  },
  created() {},
  methods:{
    gocollection(){
      this.$router.push({name:'collection'})
    },
    // 意见反馈
    goFeedback(){
      this.$router.push({name:'feedback'})
    },
    //地址管理
    goAddress(){
      this.$router.push({name:'address'})
    }
  }
};
</script>
<style lang='scss' scoped>
.mine-main {
  .mineTop {
    height: 140px;
    background-color: #333;
    .headPortrait {
      height: 74px;
      padding-top: 33px;
      margin-left: 15px;
      line-height: 74px;
      .headPortraitImg {
        float: left;
        border-radius: 50%;
        width: 74px;
        height: 74px;
      }
      .username {
        margin-left: 10px;
        float: left;
        color: $bagColor;
        font-size: 18px;
      }
    }
  }
  .mineList {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .mineItem {
      width: 33%;
      height: 72px;
      line-height: 72px;
      text-align: center;
      background-color: $bagColor;
      border-bottom: 1px solid #ececec;
    }
    .mineItem:nth-child(2),
    .mineItem:nth-child(5),
    .mineItem:nth-child(8) {
      border-right: 1px solid #ececec;
      border-left: 1px solid #ececec;
    }
  }
}
</style>